<!-- 菜单编辑表单 -->
<template>
  <q-card style="width: 450px">
    <!-- 标题 -->
    <q-toolbar>
      <q-toolbar-title>{{ title }}</q-toolbar-title> <q-btn v-close-popup icon="close" round flat />
    </q-toolbar>
    <q-separator />

    <!-- 内容 -->
    <q-card-section>
      <q-form ref="formRef" class="row q-col-gutter-x-md">
        <!-- prettier-ignore -->
        <q-tree-select v-model="dto.parentId" :nodes="menuOptions" node-key="menuId" label-key="menuName" label="上级菜单" class="col-12" bottom-slots />

        <q-field v-model="dto.menuType" label="菜单类型" class="col-12" :rules="[required]" :disable="readonly" stack-label>
          <template #control>
            <q-option-group v-model="dto.menuType" :options="menuTypeOptions" inline dense />
          </template>
        </q-field>

        <q-input v-model="dto.menuName" label="菜单名称" :rules="[required]" class="col-12" :readonly="readonly" />
        <q-input v-if="!isButton" v-model="dto.menuPath" label="菜单地址" class="col-12" :readonly="readonly" bottom-slots />
        <q-input v-model="dto.permission" label="权限标识" class="col-12" :readonly="readonly" bottom-slots />

        <q-input v-model="dto.icon" label="菜单图标" class="col-8" :readonly="readonly">
          <template #append><q-icon :name="dto.icon" /></template>
        </q-input>
        <q-input v-model.number="dto.sortNo" label="排序" class="col-4" type="number" :readonly="readonly" />
      </q-form>
    </q-card-section>
    <q-separator />

    <!-- 操作 -->
    <q-card-actions v-if="!readonly">
      <q-checkbox v-model="closeAfterSave" label="保存后关闭" />
      <q-space />
      <q-btn v-close-popup>取消</q-btn>
      <q-btn color="primary" icon="save" :disable="loading" @click="handleSubmit">保存</q-btn>
    </q-card-actions>
  </q-card>
</template>

<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue';

  import { required } from 'src/utils/validator';
  import { useCrudForm, menuTypeOptions } from 'src/composables';
  import crudApi, { MenuDto, getMenuTree } from 'src/api/system/menu';

  // 属性和事件定义
  const props = defineProps({
    id: { type: [String, Number], default: undefined },
    title: { type: String, default: '菜单表单' },
    readonly: { type: Boolean, default: false },
    parentId: { type: [String, Number], default: undefined },
    menuType: { type: Number, default: 1 },
  });
  const emit = defineEmits(['close', 'after-save']);

  // 表单数据
  const initDto = { parentId: props.parentId, menuType: props.menuType } as MenuDto;
  const { formRef, dto, closeAfterSave, loading, handleSubmit } = useCrudForm<MenuDto>(crudApi, initDto, props, emit);

  const menuOptions = ref<MenuDto[]>([]);
  onMounted(loadMenuTree);
  // 查询菜单树
  function loadMenuTree() {
    getMenuTree({ menuLevel: 2 }).then((data) => {
      menuOptions.value = data;
    });
  }

  // 菜单类型
  //const isModule = computed(() => dto.value.menuType === 1);
  //const isMenu = computed(() => dto.value.menuType === 2);
  const isButton = computed(() => dto.value.menuType === 3);
</script>

<style lang="scss" scoped></style>
src/api/system/menu
